<template>
    <div
        class="base-map-pop-panel-container"
        :style="{
            height: valueOrStr(height),
            width: valueOrStr(width),
        }"
    >
        <div class="base-map-pop-panel-common-bg" />
        <div class="base-map-pop-panel-pop-detail">
            <div class="base-map-pop-panel-title-line">
                <div class="base-map-pop-panel-title-left">
                    <slot name="title">
                        <div>
                            {{ title }}
                        </div>
                    </slot>
                </div>
                <div class="base-map-pop-panel-close" @click="close" />
            </div>
            <div class="base-map-pop-panel-content">
                <slot />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
/**
 * 定义props
 */
defineProps({
    /**
     * 标题
     */
    title: {
        type: String,
        default: '',
    },
    /**
     * 高度
     */
    height: {
        type: [Number, String],
        default: 400,
    },
    /**
     * 宽度
     */
    width: {
        type: [Number, String],
        default: 400,
    },
})

/**
 * 定义emit
 */
const emit = defineEmits(['close'])

// 处理像素
const valueOrStr = (val: string | number | undefined) => {
    if (typeof val === 'undefined') {
        return undefined
    } else if (typeof val === 'string') {
        return val
    }
    return `${val}px`
}

// 面板关闭事件
const close = () => {
    emit('close')
}
</script>
